import {AfterViewInit, Component, ElementRef, OnInit, ViewChild} from '@angular/core';
import {AComponent} from '../../public1/a/a.component';
import {D1Directive} from '../../directive/d1.directive';
import {S1Service} from '../../service/s1.service';
import {TranslateService} from '@ngx-translate/core';
@Component({
  selector: 'app-index',
  templateUrl: './index.component.html'
})
export class IndexComponent implements OnInit, AfterViewInit {
  param = {value: 'world'};
  msg: string = '';

  //todo: ViewChild 的用法
  // 1 . 为了调用AComponent的方法和变量,可以这样做:
  @ViewChild(AComponent)
  aComponent: AComponent;
  // 2 . 取得directive的方法
  @ViewChild(D1Directive)
  d1Directive: D1Directive;

  // 3 . 获取元素 在html里写上#aaaa的属性就能拿到他
  @ViewChild('aaaa')
  aaaa: ElementRef;

  constructor(public s: S1Service,private translate: TranslateService) {


    //获取翻译的内容
    this.translate.get('HELLO', {value: 'world'}).subscribe((res: string) => {
      console.log(res);
      //=> 'hello world'
    });

    this.translate.get('test').subscribe((res: string) => {

    });
    this.translate.setTranslation('en', {
      test: '1111111111'
    });
    this.translate.setTranslation('zh-CN', {
      test: '222222222222'
    });
  }

  serviceSendMsg() {
    this.s.change.emit('父组件通过中间service传递数据到子组件');
  }

  ngOnInit() {
  }

  ngAfterViewInit() {
    //调用AComponent的变量,必须在这里调用
    console.log(`this.aComponent.str ------> `, this.aComponent.str);

  }

  getTest() {
    //调用AComponent的方法;
    this.aComponent.test();
  }

  changeColor(color) {
    //调用D1Directive的方法
    this.d1Directive.change(color);
  }

  changeAaaaStr() {
    this.aaaa.nativeElement.innerHTML = '55555555';
  }

  //接收子组件的数据传递
  getChildMsg($event) {
    console.log(`$event ------> `, $event);
    this.msg = $event;
  }

}
